<template>
  <div class="delegation-list">
    <div 
      v-for="delegation in delegations" 
      :key="delegation.id"
      class="delegation-card"
    >
      <div class="card-header">
        <span class="tag">{{ delegation.type }}</span>
        <span class="time">{{ delegation.time }}</span>
      </div>
      <div class="card-content">
        <div class="locations">
          <div class="location">{{ delegation.fromLocation }}</div>
          <div class="location">{{ delegation.toLocation }}</div>
        </div>
        <div class="price">¥{{ delegation.price }}</div>
        <div class="dotted-line"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const delegations = ref([
  {
    id: 1,
    type: '快递',
    time: '10-14 20:39发布',
    fromLocation: '榕园12栋',
    toLocation: '海琴六号',
    price: 5
  },
  {
    id: 2,
    type: '快递',
    time: '10-15 20:39发布',
    fromLocation: '榕园12栋',
    toLocation: '海琴六号',
    price: 5
  },
  {
    id: 3,
    type: '快递',
    time: '10-16 20:39发布',
    fromLocation: '榕园12栋',
    toLocation: '海琴六号',
    price: 5
  },
  {
    id: 4,
    type: '快递',
    time: '10-17 20:39发布',
    fromLocation: '榕园12栋',
    toLocation: '海琴六号',
    price: 5
  },
  {
    id: 5,
    type: '快递',
    time: '10-17 20:39发布',
    fromLocation: '榕园12栋',
    toLocation: '海琴六号',
    price: 5
  }
  // More delegation items...
])
</script>

<style scoped>
.delegation-list {
  padding: 1rem;
  background: #ffffff;
  height: 100%;
  overflow-y: auto;
}

.delegation-card {
  background: linear-gradient(to right, #c4d3ed, #c4eceb);
  border-radius: 30px;
  padding: 1rem;
  margin-bottom: 1rem;
  color: #000000;
  position: relative;
}

.card-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0.5rem;
}

.tag {
  background: #888;
  color: white;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 10px;
  margin-right: 10px;
}

.time {
  color: #666;
  font-size: 8px;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.locations {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.location {
  color: #000000;
}

.price {
  font-size: 1.2rem;
  color: #000000;
  font-weight: 500;
}

.dotted-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed #000;
  z-index: -1;
}
</style>

